<template>
    <div ref="totalInfo" class="total-info total-hover" @mouseleave="leaveImage" @mouseenter.prevent="enterImage($event)">
        <slot name="totalView">
            <div v-for="(item, index) in totalInfo" :key="index">
                <slot name="other" :item="item">
                    <p class="f12">
                        {{ $t(item.lang) || item.label }}
                    </p>
                    <span class="f18 bold" :class="item.class">{{ smallNumberUnit(item.value, m_Price_Decimal_Places) }}</span>
                </slot>
            </div>
        </slot>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';

@Component({
    name: 'bill-total-info'
})
export default class commonIndex extends Vue {
    @Prop({ required: true }) totalInfo: any[];
    @Prop({ required: true }) toggleFlag: boolean;
    @Prop({ required: true }) formDom: HTMLFormElement;

    @Watch('toggleFlag')
    onToggleFlag(val) {
        this.$nextTick(() => {
            const formHieght = this.formDom.$el.clientHeight;
            console.log('formHieght', formHieght);
            const height = val ? `${formHieght}px` : '72px';
            console.log('height', height);
            (this.$refs.totalInfo as HTMLFormElement).style.height = height;
        });
    }
    get m_Price_Decimal_Places() {
        return Number(localStorage.getItem('Price_Decimal_Places')) || 2;
    }
    get m_Quantity_Decimal_Places() {
        return Number(localStorage.getItem('Quantity_Decimal_Places')) || 2;
    }
    enterImage() {
        const formHieght = this.formDom.$el.clientHeight;
        const totalInfoHeight = `${this.totalInfo.length * 48 + 32}`;
        const maxHeight = Math.max(Number(formHieght), Number(totalInfoHeight));
        (this.$refs.totalInfo as any).style.height = this.toggleFlag ? `${maxHeight}px` : `${totalInfoHeight}px`;
        (this.$refs.totalInfo as HTMLFormElement).style.transition = 'all 0.5s ease';
    }
    leaveImage() {
        const formHieght = this.formDom.$el.clientHeight;
        const height = this.toggleFlag ? `${formHieght}px` : '72px';
        (this.$refs.totalInfo as HTMLFormElement).style.height = height;
        (this.$refs.totalInfo as HTMLFormElement).style.transition = 'all 0.5s ease';
    }
    smallNumberUnit(number, digit = 0) {
        // 小数点位置
        let smallPoint = String(Number(number)).indexOf('.');
        // 小数点后位数
        let diff = 0;
        // 是小数
        if (~smallPoint) {
            // 获取小数点后位数
            diff = String(Number(number)).length - String(Number(number)).indexOf('.') + 1;
        }
        return diff > digit ? Number(number).toFixed(digit) : Number(number);
    }
}
</script>

<style lang="scss" scoped>
.total-info {
    position: absolute;
    right: 0;
    z-index: 100;
    background: #fff;
    width: 170px;
    padding: 16px;
    box-sizing: border-box;
    border: 1px solid #eee;
    border-radius: 4px;
    margin: 12px 0 0 8px;
    height: 72px;
    overflow: hidden;
    &:hover {
        box-shadow: 0px 0px 12px 0px rgba(166, 167, 173, 0.3);
    }
    &-box {
        line-height: 1.5;
        margin-bottom: 6px;
        &:last-child {
            margin-bottom: 0;
        }
    }
}
</style>
